<html>

<head>
    <title>TIMO后台模板</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- 引入css -->
    <link rel="stylesheet"
          href="{{ url_for('static',filename='/css/plugins/font-awesome-4.7.0/css/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='/libs/layui/css/layui.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='/css/admin_main.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='/libs/zTree_v3/css/zTreeStyle/zTreeStyle.css') }}">

    <style>
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pagination li {
            display: inline;
        }

        ul.pagination li a {
            color: black;
            float: left;
            padding: 2px 16px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
        }

        .pagination li:first-child a {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .pagination li:last-child a {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        ul.pagination li a.active {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        ul.pagination li a:hover:not(.active) {
            background-color: #ddd;
        }
    </style>
</head>

<body class="timo-layout-page">
<div class="layui-card">
    <div class="layui-card-header timo-card-header">
        <span><i class="fa fa-bars"></i> 用户管理</span>
        <i class="layui-icon layui-icon-refresh refresh-btn"></i>
    </div>
    <div class="layui-card-body">
        <div class="layui-row timo-card-screen put-row">
            <div class="pull-left layui-form-pane timo-search-box">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" id="username" value="{{ user_name }}" placeholder="请输入用户名"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-block">
                        <input type="text" name="idcard" id="idcard" value="{{ idcard }}" placeholder="请输入身份证号"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn timo-search-btn">
                        <a id="query" href="javascript:void(0)"><i class="fa fa-search"></i></a>
                    </button>
                </div>
            </div>

            <div class="pull-right screen-btn-group">
                <div class="btn-group-right">
                    <button class="layui-btn open-popup" data-title="添加用户" data-size="600,520"
                            data-url="/admin/user/edit">
                        <i class="fa fa-plus"></i> 添加
                    </button>
                </div>
            </div>
        </div>
        <table class="layui-table timo-table">
            <thead>

            <tr>
                <th class="timo-table-checkbox">
                    <label class="timo-checkbox"><input type="checkbox">
                        <i class="layui-icon layui-icon-ok"></i></label>
                </th>
                <th>用户名</th>
                <th>手机号</th>
                <th>身份证号</th>
                <th>密码</th>
                <th>创建时间</th>
                <th>更新时间</th>
                {#<th>状态</th>#}
                <th>操作</th>
            </tr>

            </thead>
            <tbody>
            {% for stus in stus %}
                <tr>
                    <td><label class="timo-checkbox"><input type="checkbox" value="1">
                        <i class="layui-icon layui-icon-ok"></i></label></td>
                    <td>{{ stus.user_name }}</td>
                    <td>{{ stus.mobile }}</td>
                    <td>{{ stus.id_card }}</td>
                    <td>{{ stus.pwd }}</td>
                    <td>{{ stus.create_time }}</td>
                    <td>{{ stus.update_time }}</td>
                    {# <td>
                        {% if stus.isDelete %}
                            启用
                        {% else %}
                            禁用
                        {% endif %}
                    </td>#}
                    <td>
                        <a class="open-popup" data-title="编辑用户" data-size="600,570" href="#"
                           data-url="/admin/user/edit?id={{ stus.id }}">编辑</a>
                        <a onclick="deleteUser({{ stus.id }})">删除</a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <ul class="pagination">
            {#如果存在上一页#}
            {% if paginate.has_prev %}
                <li><a href="/admin/user?page={{ paginate.prev_num }}">«</a></li>
            {% endif %}
            {% for i in  paginate.iter_pages() %}
                <li><a href="/admin/user?page={{ i }}">{{ i }}</a></li>
            {% endfor %}

            {#如果存在下一页#}
            {% if paginate.has_next %}
                <li><a href="/admin/user?page={{ paginate.next_num }}">»</a></li>
            {% endif %}
            <li><a href="#">共{{ paginate.total }}条数据</a></li>
        </ul>
        <br>
    </div>
</div>
<script src="{{ url_for('static',filename='/libs/layui/layui.all.js') }}"></script>
<script src="{{ url_for('static',filename='/js/main.js') }}"></script>
<script src="{{ url_for('static',filename='/libs/jquery-3.5.1.min.js') }}"></script>
<script src="{{ url_for('static',filename='/libs/zTree_v3/js/jquery.ztree.core.min.js') }}"></script>
<script src="{{ url_for('static',filename='/js/timoTree.js') }}"></script>
<script type="text/javascript">
    var local = window.localStorage;
    // 树形菜单
    $.fn.selectTree({
        rootTree: '全部',
        onSelected: function (treeNode) {
            local.setItem('deptTitle', treeNode.name);
        }
    });

    function deleteUser(id) {
        layer.confirm('确认删除该用户?', function (index) {
            $.ajax({
                url: "/admin/user/delete",
                type: "POST",
                data: {
                    "id": id
                },
                success: function (data) {
                    if (data.result == 200) {
                        layer.msg('删除成功······', {
                            icon: 16
                            , shade: 0.01
                            , time: 1000
                        }, function () {
                            layer.closeAll();
                            window.parent.location.reload();
                        });
                    }
                }
            })

        });
    }

    $("#query").click(function () {
        var username = $("#username").val();
        var idcard = $("#idcard").val();

        $.get("/admin/user", {"username": username, "idcard": idcard}, function (result) {});

    })

</script>
</body>

</html>